<template>
	<view class="Global">


		<bgImage></bgImage>

		<MyNav :title="title" bgColor="" :backIcon="isback" id="main"></MyNav>


		<scroll-view scroll-y="true" class="contentScroll" :style="'height:'+scrollViewHeight+'px'">
			<view class="ContentScrollInner">


				<view class="contentTop">

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">考勤规则名称</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{workTime.name}}</text>

							<uni-icons type="right" size="14"></uni-icons>


						</view>

					</view>

					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">规则类型</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">固定排班</text>



						</view>

					</view>
          <view class="contentItem2" @click="communitySetting()">

            <view class="contentItemTextLeftContent">
              <text class="contentItemTextLeft">上下班设置</text>

            </view>

            <view class="contentItemRightContent">
              <text class="contentItemTextLeft">{{workTime.goWorkTime}} - {{workTime.offWorkTime}}</text>

              <uni-icons type="right" size="14"></uni-icons>


            </view>

          </view>


<!--					<view class="contentItem2">
						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">考勤人员</text>
						</view>
					</view>-->

<!--					<view class="ContentSelect">
						<text class="ContentSelectY">指定的部门或人员</text>
						<text class="ContentSelectN">全公司</text>
					</view>-->





<!--					<view class="contentItem2" @click="selectAttendanceOffice()">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">选择考勤人员</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">园豆信息</text>

							<uni-icons type="right" size="14"></uni-icons>


						</view>

					</view>-->

				</view>


				<!-- 下半部分开始 -->
<!--				<view class="contentBottom">-->


<!--					<view class="contentItem2" @click="communitySetting()">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">上下班设置</text>

						</view>

						<view class="contentItemRightContent">
							<text class="contentItemTextLeft">{{workTime.goWorkTime}} - {{workTime.offWorkTime}}</text>

							<uni-icons type="right" size="14"></uni-icons>


						</view>

					</view>-->

<!--					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">设备打卡</text>

						</view>

						<view class="contentItemRightContent" @click="openOrClose()">

							<image v-show="deviceSwitch==true" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="deviceSwitch==false" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

						</view>

					</view>-->

<!--					<view class="selectDeviceContent">
						<image src="/static/clock/xuanze.png" class="selectDeviceContentImg" mode="scaleToFill"></image>
						<text class="selectDeviceContentText">选择打卡设备</text>
						<text class="selectDeviceContentTextColor">(已选择0台设备)</text>
					</view>-->


<!--					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">GPS打卡</text>

						</view>

						<view class="contentItemRightContent" @click="GPSopenOrClose()">

							<image v-show="GPSDeviceSwitch==true" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="GPSDeviceSwitch==false" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


						</view>

					</view>-->





<!--					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">WIFI打卡</text>

						</view>

						<view class="contentItemRightContent" @click="WIFIopenOrClose()">

							<image v-show="WIFIDeviceSwitch==true" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="WIFIDeviceSwitch==false" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


						</view>

					</view>-->



<!--					<view class="contentItem2">

						<view class="contentItemTextLeftContent">
							<text class="contentItemTextLeft">外勤打卡</text>

						</view>

						<view class="contentItemRightContent" @click="outsideOpenOrClose()">

							<image v-show="outsideDeviceSwitch==true" src="/static/clock/dakai.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>

							<image v-show="outsideDeviceSwitch==false" src="/static/clock/guanbi.png"
								class="contentItemRightContentSwitchImg" mode="scaleToFill"></image>


						</view>

					</view>-->



<!--				</view>-->
				<!-- 下半部分结束 -->



			</view>
		</scroll-view>




		<view class="loginContent" id="mainBottom">

			<button @click="addClick()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>


	</view>





</template>

<script>
	import MyNav from '@/components/customnavbar.vue'

	import bgImage from '@/components/backgroundImage.vue'
  import {myWorkTime} from "@/pages/api/api.js";


	export default {
		components: {
			MyNav,
			bgImage,

		},
		data() {
			return {
				title: '考勤规则',
				isback: true,

				login: '下一步',


				// 设备打卡 开关
				deviceSwitch: false,

				// GPS开关
				GPSDeviceSwitch: false,

				// WIFI开关
				WIFIDeviceSwitch: false,

				// 外勤打卡开关
				outsideDeviceSwitch: false,

				mainTop: '',
				bottomTop: '',
				scrollViewHeight: 0,
        workTimeId: 0,
        workTime: {},
			}
		},
    onLoad: function(option) {
      this.workTimeId = JSON.parse(decodeURIComponent(option.workTimeId));
      this.myWorkTime();
    },
		onReady() {
			// 获取距离顶部的距离
			let query = uni.createSelectorQuery().in(this);
			query.select('#main').boundingClientRect(data => {
				// console.log(data);
				this.mainTop = data.top

				// console.log('1底部距离', this.mainTop);

				// 在其他页面或组件中访问
				// const app = getApp();
				// this.scrollViewHeight = app.globalData.system.screenHeight - this.mainTop - app.globalData
				// 	.totalHeight


				/* console.log('获取距离',this.mainTop,this.scrollViewHeight);
				console.log('滚动距离',this.scrollViewHeight); */
			}).exec();

			query.select('#mainBottom').boundingClientRect(data => {
				this.bottomTop = data.top
				// console.log('2底部距离', this.bottomTop);

				this.scrollViewHeight = this.bottomTop - this.mainTop - 80
				// console.log('可滚动距离', this.scrollViewHeight);
			}).exec();



		},
		methods: {
      myWorkTime(){
        myWorkTime(this.workTimeId).then((res) =>{
          if(res.code==200){
            this.workTime = res.data;
          }
        })
      },
			// 选择考勤人员
			selectAttendanceOffice(){
				uni.navigateTo({
					url: '/subPack/clockIn/attendanceOfficer/attendanceOfficer',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 上下班设置
			communitySetting() {
        this.workTime.workTimeId = this.workTimeId
				uni.navigateTo({
					url: '/subPack/clockIn/commutingSettings/commutingSettings?workTime='+encodeURIComponent(JSON.stringify(this.workTime)),
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			//      设备打卡
			openOrClose() {
				this.deviceSwitch = !this.deviceSwitch
			},
			GPSopenOrClose() {
				this.GPSDeviceSwitch = !this.GPSDeviceSwitch
			},
			WIFIopenOrClose() {
				this.WIFIDeviceSwitch = !this.WIFIDeviceSwitch
			},
			// 外勤开关
			outsideOpenOrClose() {
				this.outsideDeviceSwitch = !this.outsideDeviceSwitch
			},

		}
	}
</script>

<style>
	.ContentScrollInner {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.contentScroll {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		margin-top: 30rpx;
		height: 600rpx;
	}

	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;
		bottom: 30rpx;
	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}

	.selectDeviceContentTextColor {
		display: flex;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		align-items: center;
		height: 100%;
	}

	.selectDeviceContentText {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0081FF;
		align-items: center;
		height: 100%;
	}

	.selectDeviceContentImg {
		display: flex;
		align-items: center;
		width: 40rpx;
		height: 40rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.selectDeviceContent {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		height: 80rpx;
		width: 100%;


	}

	.contentBottom {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		width: 690rpx;
		height: 661rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin-top: 30rpx;
	}

	.ContentSelectN {

		display: flex;


		background: #FFFFFF;
		border-radius: 16rpx;
		border: 1px solid #999999;
		background: #EEEEEE;


		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		margin-left: 10rpx;

	}

	.ContentSelectY {
		display: flex;

		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 5rpx;
		padding-bottom: 5rpx;

		background: #EEEEEE;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;
		margin-left: 30rpx;
	}

	.ContentSelect {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 100%;

	}

	.contentItemTextLeftContent {

		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.contentItemRightContentSwitchImg {
		display: flex;

		width: 80rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

		margin-right: 30rpx;
	}

	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}

	.contentItemTextLeftStart {
		color: red;
	}

	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;

	}

	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}

	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;

		width: 690rpx;
		height: 120rpx;

		border-bottom: #F9FCFF solid 1rpx;

		/* background-color: aqua; */
	}



	.contentTop {

		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		margin-top: 30rpx;
		width: 690rpx;
		/*height: 541rpx;*/
		background: #FFFFFF;
		border-radius: 30rpx;


	}
</style>
